<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          crossorigin="anonymous">
    <link rel="stylesheet" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" th:href="@{/adminlte/dist/css/adminlte.min.css}">
    <link rel="stylesheet" th:href="@{/adminlte/plugins/fontawesome-free/css/all.min.css}">
    <title>用户列表</title>
</head>
<body>
<div class="nk-container">
    <!-- 头部 -->
    <header class="bg-dark sticky-top" th:replace="/site/home::header">

    </header>

    <!-- 内容 -->
    <div class="main">
        <div class="container">
            <!-- 列表 -->
            <div class="input-group input-group-sm" style="width: 150px;">
                <form  method="post" th:action="@{/searchname}">
                    <div class="row">
                        <input type="text" name="keyname" id="keyname" class=" form-control float-right col-md-7" placeholder="搜索">
                        <button type="submit" class="btn-default col-md-5">搜索</button>
                    </div>
                </form>
                <div class="input-group-append">
                    <button type="submit" class="btn btn-default"><i class="fas fa-search"></i></button>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <div class="card-tools">
                    </div>
                </div>
                <!-- /.card-header -->
                <div class="card-body table-responsive p-0">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">头像</font></font></th>
                            <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">用户</font></font></th>
                            <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">注册日期</font></font></th>
                            <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">邮箱</font></font></th>
                            <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">状态</font></font></th>
                        </tr>
                        </thead>
                        <tbody th:each="user:${users}">
                        <tr>
                            <td><font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;">
                                    <img th:src="${user.headerUrl}" alt="用户头像" style="width: 27px;height: 27px"> </font></font>
                            </td>
                            <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;" th:utext="${user.username}">约翰·杜</font></font></td>
                            <td><font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;" th:text="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm:ss')}">2014年11月7日</font></font>
                            </td>
                            <td><font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;" th:text="${user.email}">email</font></font>
                            </td>
                            <td><font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;">
                                    <button class="btn-sm btn-danger"  th:if="${user.status==0}" th:onclick="|active(${user.id})|">未激活</button></font></font>
                                    <button class="btn-sm btn-success"  th:if="${user.status==1}" th:onclick="|forbid(${user.id})|">已激活</button></font></font>
                            </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- /.card-body -->
            </div>

            <!-- 分页 -->
            <nav class="mt-5" th:replace="/site/home::pagination">
            </nav>
        </div>
    </div>

    <!-- 尾部 -->
    <footer class="bg-dark" th:replace="/site/home::footer">

    </footer>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script th:src="@{/js/global.js}"></script>
<script th:src="@{/js/profile.js}"></script>
<script th:src="@{/js/layer.js}"></script>
<script>
    function active(userId) {
        $.post(
            CONTEXT_PATH + "/active",
            {"userId":userId},
            function () {
               window.location.reload();
            }
        );
    }
</script>
<script>
    function forbid(userId) {
        $.post(
            CONTEXT_PATH + "/forbid",
            {"userId":userId},
            function () {
                    window.location.reload();
            }
        );
    }
</script>
</body>
</html>
